import React from "react";
import ReactDom from "react-dom"
import "./03.css"
class Tab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            c1: 'active',
            c2: 'unActive'
        }
        this.click1 = this.click1.bind(this)
    }

    click1(e) {
        if (e.target.dataset.index === '1') {
            this.setState({
                c1: 'active',
                c2: 'unActive'
            })
        } else {
            this.setState({
                c1: 'unActive',
                c2: 'active'
            })
        }
    }

    render() {
        return (
            <div>
                <button data-index="1" onClick={this.click1}>按钮1</button>
                <button data-index="2" onClick={this.click1}>按钮2</button>
                <div className={this.state.c1}>内容一</div>
                <div className={this.state.c2}>内容二</div>
            </div>
        )
    }

}

ReactDom.render(
    <Tab/>,
    document.querySelector('#root')
)